<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>

        body {
            height: 4000px;
        }
        .banner {
            width: 1000px;
            height: 500px;
            margin: auto;
            position: relative;
            background-color: #ddd;

        }

        .img {
            width: 1000px;
            height: 500px;

            overflow: hidden;
        }


        .banner ul {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
        }

        .banner ul li {
            width: 30px;
            height: 30px;
            background-color: #f00;
            display: inline-block;
        }

        .banner ul a {
            width: 30px;
            height: 30px;
            background-color: #f00;
            display: block;
        }

        .banner img {
            width: 1000px;
            height: 500px;
        }
    </style>
</head>

<body>

    <div class="banner">
        <ul>
            <li>
                <a href="#a"></a>
            </li>
            <li>
                <a href="#b"></a>
            </li>
            <li>
                <a href="#c"></a>
            </li>
            <li>
                <a href="#d"></a>
            </li>
        </ul>
        <div class="img">
            <img id="a" src="http://infinistudio.cn/Public//Upload/2017-07-14/596870c2d2b94.jpg" alt="">
            <img id="b" src="http://infinistudio.cn/Public//Upload/2019-11-05/5dc054a7011bb.jpg" alt="">
            <img id="c" src="http://infinistudio.cn/Public//Upload/2018-06-15/5b235be62c53b.jpg" alt="">
            <img id="d" src="http://infinistudio.cn/Public//Upload/2017-03-08/58bfbd40b1d73.jpg" alt="">
        </div>
    </div>

</body>

</html>